<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div>
        <el-input  v-model="info.cid" type="hidden"></el-input>
        <el-input  placeholder="商品名称" v-model="info.gname" style="display: inline-block; width: 200px;"></el-input>
        <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
    </div>
    <el-table
            ref="FormRef"
            :data="goodsArr"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                prop="id"
                label="编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="gname"
                label="商品名称">
        </el-table-column>
        <el-table-column
                prop="code"
                label="商品编码">
        </el-table-column>
        <el-table-column
                prop="category.category"
                label="商品类别">
        </el-table-column>
        <el-table-column
                prop="spec.stype"
                label="商品规格">
        </el-table-column>
        <el-table-column
                prop="brand.btype"
                label="商品品牌">
        </el-table-column>
        <el-table-column
                prop="grade.gtype"
                label="商品等级">
        </el-table-column>
        <el-table-column
                prop="deposit.state"
                label="商品储藏方式">
        </el-table-column>
        <el-table-column
                prop="minprice"
                label="最低价格">
        </el-table-column>
        <el-table-column
                prop="maxprice"
                label="最高价格">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="success" plain @click="addGoods(scope.row.id)">添加</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="pageTotal">
    </el-pagination><el-button type="success" plain @click="back()">返回</el-button>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            info:{
                cid:{}
            },
            goodsArr:[],
            pageTotal:0,
            goodsInfo:{}
        },
        methods:{
            back:function(){
              window.location.href = "/cai/storeGoods.html";
            },
            handleCurrentChange:function (val) {
                getInfo(val,10);
            },
            searchData:function () {
                getInfo(1,10);
            },
            addGoods:function (id) {
                $.get("/cai/goods/getGoods/"+id,function (backData) {
                    app.goodsInfo = backData.data;
                    $.post("/cai/storeGoods/addOneGoods",app.goodsInfo,function (addBackData) {
                        if(addBackData.code == 1){
                            app.$notify({
                                title: '成功提示',
                                message: addBackData.msg,
                                type: 'success'
                            });
                        }else {
                            app.$notify.error({
                                title: '错误提示',
                                message: addBackData.msg
                            });
                        }
                    });
                })
            }
        }
    });
    var cid = window.location.href.split("=")[1];
    app.info.cid = cid;
    function getInfo(a,b) {
        app.info.pageNo = a;
        app.info.pageCount = b;
        $.post("/cai/storeGoods/addGoodsList",app.info,function(backData){
            app.goodsArr = backData.data.currentData;
            app.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1,10);
</script>
</body>
</html>